<template>
    <div id="app">
    <el-form :model="admin" label-width="100px" :rules="formRules" ref="abc">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="admin.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="admin.password"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio v-model="admin.status" label="1">可用</el-radio>
        <el-radio v-model="admin.status" label="0">禁用</el-radio>
      </el-form-item>

      <el-form-item label="角色" prop="status">
        <el-checkbox  v-for="(item,index) in roleList"
                      :key="index"
                      :label="item.roleId"
                       v-model="admin.roleIds"
        >{{item.roleName}}</el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.prevent="test">保存</el-button>
      </el-form-item>
    </el-form>
    </div>
</template>

<script>
export default {
  name: "addRecord",
      data(){
      return {
        roleList:[],
        admin:{
          username:"",
          password:"",
          status:"",
          roleIds:[]
        },
        //定义表单的验证规则
        formRules:{//表单验证规则
          username:[
            //required: true表示该框是必填的。message表示用户出错后提示信息，trigger移出光标提示错误信息
            {required:true,message:"奖惩名称不能为空",trigger:"blur"}
          ]
        }
      }
      },
    methods:{
    test(){
      this.$refs["abc"].validate((valid)=>{
        //valid表示表单是否验证通过
        if(valid){
          console.log(this.admin)
          //发出保存信息
          this.$confirm("是否确认提交","保存提示").then(()=>{
            this.axios.post("/admin/addAmin",this.admin).then((resp)=>{
              this.$router.push("/admin/selectAdmin")
            });
          }).catch(()=>{})
        }
      })
    }
  },
    created(){
        //获取所有学生信息
      this.axios.get("/role/selectAll").then((resp)=>{
        this.roleList=resp.data

      });
      // this.axios.get("/record/selectOne/"+this.$route.query.id).then((resp)=>{
      //   this.record=resp.data
      // });
    }
}
</script>

<style scoped>

</style>
